<template>
    <view class="device-add pd-v-24">


        <view class="device-add__header">
            <u--form
                labelWidth="80"
                labelPosition="left"
                :model="form"
                :rules="rules"
                ref="uForm"
            >
                <view class="border8 pd-l-24 bg-white mr-t-20">
                    <u-form-item
                        label="设备名称"
                        prop="name"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="form.name"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入设备名称"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="设备编号"
                        prop="number"
                        borderBottom
                    >
                        <u--input 
                            v-model.trim="form.number"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入设备编号"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="所属门店"
                        prop="storeId"
                        borderBottom
                        @click="showPicker = true"
                    >
                        <u--input
                            v-model="form.storeId"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请选择所属门店"
                            readonly
                            suffixIcon="arrow-down"
                            :suffixIconStyle="{marginRight:'18rpx'}"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="备注"
                        prop="remark"
                        borderBottom
                    >
                        <u--input 
                            v-model.trim="form.remark"
                            border="none"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入备注"
                            maxlength="50"
                        ></u--input>
                    </u-form-item>
                </view>
            </u--form>
        </view>

        <view class="device-add__footer position-f flex flex-j-center flex-center full-w">
            <u-button :customStyle="{height:'88rpx',width:'600rpx'}" shape="circle" color="#35BE65"  text="确认" @click="confirm"></u-button>
        </view>

        <u-picker :show="showPicker" :columns="columns" keyName="name" :closeOnClickOverlay="true" @cancel="showPicker = false" @close="showPicker = false" @confirm="pickerConfirm"></u-picker>

    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, defineProps,computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { deviceQueryById,deviceAdd,deviceUpdate,allStoreList } from '@/api/proxy.js'


const props = defineProps({
    id:{
        type:String,
        default:''
    }
})

const store = useStore();


const form = ref({
    name: '',
    number:'',
    storeId:'',
    remark:''
});
const show = ref(false);
const showPicker = ref(false);
const columns = ref([])
const uForm = ref(null);

const rules = ref({
    name: [
        {
            required: true,
            message: '请输入设备名称',
            trigger: ['blur','change']
        }
    ],
    number: [
        {
            required: true,
            message: '请输入设备编号',
            trigger: ['blur','change']
        }
    ],
    storeId: [
        {
            required: true,
            message: '请选择所属门店',
            trigger: ['blur','change']
        }
    ]
    
})


onShow(() => {
    
})

onLoad(() => {
    if(props.id) {
        getDeviceQueryById()
    } else {
        getAllStoreList()
    }

    
})

const getAllStoreList = () => {
    allStoreList().then(res => {
        if(res.code == 200) {
            columns.value = [res.data]
            if(form.value.storeId) {
                let storeItem = res.data.find(item => item.id == form.value.storeId);

                if(storeItem) {
                    form.value.storeId = storeItem.name
                }
               
            }
            
        }
    })
}


const getDeviceQueryById = () => {
    deviceQueryById({id:props.id}).then(res => {
        if(res.code == 200) {
            res.data.storeId = String(res.data.storeId)
            form.value = res.data
            getAllStoreList()
        }
    })
}

const pickerConfirm = (e) => {
    let storeItem = columns.value[0].find(item => item.id == e.value[0].id);

    if(storeItem) {
        form.value.storeId = storeItem.name
    }
    
    showPicker.value = false;
};

const confirm = () => {
    uForm.value.validate().then(() => {
        let params = {...form.value};
        let storeItem = columns.value[0].find(item => item.name == params.storeId)

        if(storeItem) {
            params.storeId = storeItem.id
        }


        if(props.id) {
            params.id = props.id;
            deviceUpdate(params).then(res => {
                if(res.code == 200) {
                    uni.showToast({
                        title:'修改成功',
                        icon:'none'
                    })
                    setTimeout(() => {
                        uni.navigateBack({
                        delta:1
                        })
                    },1500)
                } else {
                    uni.showToast({
                        title:res.msg,
                        icon:'none'
                    })
                }
            })
        } else {
            
            deviceAdd(params).then(res => {
                if(res.code == 200) {
                    
                    uni.showToast({
                        title:'添加成功',
                        icon:'none'
                    })
                    setTimeout(() => {
                        uni.navigateBack({
                        delta:1
                        })
                    },1500)
                } else {
                    uni.showToast({
                        title:res.msg,
                        icon:'none'
                    })
                }
            })
        }
    })
}

</script>

<style scoped lang="scss">
.device-add {
    
    background:#F7F7F7;
    min-height:100vh;
    


    .income-total {
        background: #F8FFF8;
    }

    .shop-total {
        background: #FFFAF8;
    }
    
    .device-add__body {
        padding-bottom:256rpx;
        .device-item {
            .desc {
                width:130rpx;
            }

            .border-b {
                border-bottom:1px solid #EEEEEE;
            }
        }
    }

    .device-add__footer {
        left:0;
        bottom:76rpx;
    }
}
</style>
